<script language='javascript'>
   $(document).ready(function() { 
    var labelType, useGradients, nativeTextSupport, animate;
    var st;
    var json;
    var isAjax = true;
    (function() {
        var ua = navigator.userAgent,
        iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
        typeOfCanvas = typeof HTMLCanvasElement,
        nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
        textSupport = nativeCanvasSupport 
            && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
        labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
        nativeTextSupport = labelType == 'Native';
        useGradients = nativeCanvasSupport;
        animate = !(iStuff || !nativeCanvasSupport);
    })();

    var Log = {
        elem: false,
        write: function(text){
            if (!this.elem) 
                this.elem = document.getElementById('log');
            this.elem.innerHTML = text;
            this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
        }
    };
    function initLoad(){
        $.ajax({
            type: "POST",
            url: utility.makeUrl("users/loadTree"),
            datatype: "json",
            success: function(data){
                json = data;
                init();
                $('#center-container').css("width","98%");
                $('#center-container').css("left","0px");
                $("#infovis").css("margin","0");
                $("#infovis").css("overflow","visible");
            }
        });
    }
    function loadData(id){
        $.ajax({
            type: "POST",
            url: "http://localhost/sisagyp/users/loadTree",
            datatype: "json",
            data:"id="+id,
            success: function(data){
                return $.parseJSON(data);
            }
        });
    }
    function cambiaPosicion(){
        isAjax = false;			
        st.switchPosition("top", "animate", {  
            onComplete: function() {  
                st.onClick(st.root);
                isAjax = true;
            }  
        });	
    }
    function init(){
        $jit.ST.Plot.NodeTypes.implement({
            'nodeline': {
                'render': function(node, canvas, animating) {
                    if(animating === 'expand' || animating === 'contract') {
                        var pos = node.pos.getc(true), nconfig = this.node, data = node.data;
                        var width  = nconfig.width, height = nconfig.height;
                        var algnPos = this.getAlignedPos(pos, width, height);
                        var ctx = canvas.getCtx(), ort = this.config.orientation;
                        ctx.beginPath();
                        if(ort == 'left' || ort == 'right') {
                            ctx.moveTo(algnPos.x, algnPos.y + height / 2);
                            ctx.lineTo(algnPos.x + width, algnPos.y + height / 2);
                        } else {
                            ctx.moveTo(algnPos.x + width / 2, algnPos.y);
                            ctx.lineTo(algnPos.x + width / 2, algnPos.y + height);
                        }
                        ctx.stroke();
                    } 
                }
            }
          
        });
        
        
        st = new $jit.ST({
            'injectInto': 'infovis',
            duration: 800,
            width:950,
            height:550,		
            transition: $jit.Trans.Quart.easeInOut,
            levelDistance: 100,
            levelsToShow: 4,
            Node: {
                height: 40,
                width: 80,
                type: 'nodeline',
                color:'#23A4FF',
                lineWidth: 0.5,
                align:"left",
                overridable: true
            },
            Edge: {
                type: 'bezier',
                lineWidth: 2,
                color:'#23A4FF',
                overridable: true
            },
            Navigation: {  
                enable:true,  
                panning:true  
            }});
    }});
       
</script>
<div id="infovis"></div>

